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Front-End Developer Handbook 


Written by Cody Lindley sponsored by — Frontend Masters 

This is a guide that anyone could use to learn about the practice of front-end development. It 
broadly outlines and discusses the practice of front-end engineering: how to learn it and 
what tools are used when practicing it. 

It is specifically written with the intention of being a professional resource for potential and 
currently practicing front-end developers to equip themselves with learning materials and 
development tools. Secondarily, it can be used by managers, CTOs, instructors, and head 
hunters to gain insights into the practice of front-end development. 

The content of the handbook favors web technologies (HTML, CSS, DOM, and JavaScript) 
and those solutions that are directly built on top of these open technologies. The materials 
referenced and discussed in the book are either best in class or the current offering to a 
problem. 

The book should not be considered a comprehensive outline of all resources available to a 
front-end developer. The value of the book is tied up in a terse, focused, and timely curation 
of just enough categorical information so as not to overwhelm anyone on any one particular 
subject matter. 

The intention is to release an update to the content yearly. 

The handbook is divided into three parts. 

Part I. The Front-End Practice 

Part one broadly describes the practice of front-end engineering. 

Part II: Learning Front-End Development 

Part two identifies self-directed and direct resources for learning to become a front-end 
developer. 

Part III: Front-End Development Tools 

Part three briefly explains and identifies tools of the trade. 
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Download a .pdf, .epub, or .mobi file from: 

• https://www.gitbook.com/book/frontendmasters/front-end-handbook/details 

Contribute content, suggestions, and fixes on github: 

• https://github.com/FrontendMasters/front-end-handbook 



This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 
Unported License. 


Introduction 
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What Is a Front-End Developer? 


A front-end developer architects and develops websites and applications using web 
technologies (i.e., HTML, CSS, DOM, and JavaScript), which run on the web platform or act 
as compilation input for non-web platform environments (i.e., NativeScript). 
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Image source: https://www. upwork. com/hiring/development/front-end-developer/ 

Typically, a person enters into the field of front-end development by learning to develop 
HTML, CSS, and JS code, which runs in a web browser, headless browser, WebView, or as 
compilation input for a native runtime environment. The four run times scenarios are 
explained below. 

A web browser is software used to retrieve, present, and traverse information on the WWW. 
Typically, browsers run on a desktop, laptop, tablet, or phone, but as of late a browser can 
be found on just about anything (i.e, on a fridge, in cars, etc.). 

The most common web browsers are: 

• Chrome 

• Internet Explorer 

• Fi refox 

• Safari 

Headless browsers are a web browser without a graphical user interface that can be 
controlled from a command line interface for the purpose of web page automation (e.g., 
functional testing, scraping, unit testing, etc.). Think of headless browsers as a browser that 
you can run from the command line that can retrieve and traverse web pages. 

The most common headless browsers are: 

• PhantomJS 
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• slimerjs 

• trifleJS 

Webviews are used by a native OS, in a native application, to run web pages. Think of a 
webview like an iframe or a single tab from a web browser that is embedded in a native 
application running on a device (e.g., iOS, android, windows). 

The most common solutions for webview development are: 

• Cordova (typically for native phone/tablet apps) 

• NW.js (typically used for desktop apps) 

• Electron (typically used for desktop apps) 

Eventually, what is learned from web browser development can be used by front-end 
developers to craft code for environments that are not fueled by a browser engine. As of 
late, development environments are being dreamed up that use web technologies (e.g., CSS 
and JavaScript), without web engines, to create truly native applications. 

Some examples of these environments are: 

• NativeScript 

• React Native 


What Is a Front-End Developer? 
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Part I. The Front-End Practice 

Part one broadly describes the practice of front-end engineering. 


Part I: The Front-End Practice 
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Front-End Jobs Titles 


Below is a list and description of various front-end job titles. The common, or most used (i.e., 
generic), title for a front-end developer is, "front-end developer" or "front-end engineer". Note 
that any job that contains the word "front-end", "client-side", "web Ul", "HTML", "CSS", or 
"JavaScript" typically infers that a person has some degree of HTML, CSS, DOM, and 
JavaScript professional know how. 


Front-End Developer/Engineer (aka Front-End Web Developer/Engineer, Client-Side 
Developer/Engineer, Front-End Software Developer/Engineer or Ul Engineer) 

The generic job title that describes a developer who is skilled to some degree at HTML, 
CSS, DOM, and JavaScript and implementing these technologies on the web platform. 


CSS/HTML Developer 

The front-end job title that describes a developer who is skilled at HTML and CSS, excluding 
JavaScript and Application know how. 


Front-End JavaScript (optionally.. .Application) Developer 

When the word "JavaScript Application" is included in the job title, this will denote that the 
developer should be an advanced JavaScript developer possessing advanced 
programming, software development, and application development skills (i.e will have solid 
experience building front-end applications). 


Front-End Web Designer 

When the word "Designer" is included in the job title, this will denote that the designer will 
posses front-end skills (i.e., HTML & CSS) but also professional design (Visual Design and 
Interaction Design) skills. 


Web/Front-End User Interface (aka Ul) Developer/Engineer 
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When the word "Interface" or "Ul" is included in the job title, this will denote that the 
developer should posses interaction design skills in addition to front-end skills. 


Mobile/Tablet Front-End Developer 

When the word "Mobile" or "Tablet" is included in the job title, this will denote that the 
developer has experience developing front-ends that run on mobile or tablet devices (either 
natively or on the web platform, i.e., in a browser). 


Front-End SEO Expert 

When the word "SEO" is included in the job title, this will denote that the developer has 
extensive experience crafting front-end technologies towards an SEO strategy. 


Front-End Accessibility Expert 

When the word "Acessibility" is included in the job title, this will denote that the developer 
has extensive experience crafting front-end technologies that support accessibility 
requirements and standards. 


Front-End Dev. Ops 

When the word "DevOps" is included in the job title, this will denote that the developer has 
extensive experience with software development practices pertaining to collaboration, 
integration, deployment, automation, and measurement. 


Front-End Testing/QA 

When the word "Testing" or "QA" is included in the job title, this will denote that the 
developer has extensive experience testing and managing software that involves unit 
testing, functional testing, user testing, and A/B testing. 


Note that if you come across the "Full Stack" or the generic "Web Developer" terms in job 
titles these words may be used by an employer to describe a role that is responsible for all 
aspects of web/app development, i.e., both front-end (potentially including design) and back- 
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end. 
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Web Technologies Employed by Front-End 
Developers 



Image source: http://www. 2n2media. com/compare-front-end-development-and-back-end- 
development 


The following web technologies are employed by front-end developers: 

• Hyper Text Markup Language (aka HTML) 

• Cascading Style Sheets (aka CSS) 

• Document Object Model (aka DOM) 

• JavaScript Programming Language (aka: ECMAScript 6, ES6, JavaScript 2015) 

• Web APIs (aka HTML5 and friends or Browser APIs) 

• Hypertext Transfer Protocol (aka HTTP) 

• Uniform Resource Locators (aka URLs) 

• JavaScript Object Notation (aka JSON) 

• Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet 
Applications (aka ARIA) 

These technologies are defined below with the relevant documentation and specifications. 
For a comprehensive list of all web related specifications have a look at platform.html5.org. 


Hyper Text Markup Language (aka HTML) 
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HyperText Markup Language, commonly referred to as HTML, is the standard markup 
language used to create web pages. Web browsers can read HTML files and render 
them into visible or audible web pages. HTML describes the structure of a website 
semantically along with cues for presentation, making it a markup language, rather than 
a programming language. 

— Wikipedia 

Most relevant specifications / documentation: 

• All W3C HTML Spec 

• The elements of HTML from the Living Standard 

• Global attributes 

• HTML5 from W3C : 5th major revision of the core language of the World Wide Web 

• HTML attribute reference 

• HTML element reference 

• The HTML Syntax from the Living Standard 

Cascading Style Sheets (aka CSS) 

Cascading Style Sheets (CSS) is a style sheet language used for describing the look 
and formatting of a document written in a markup language. Although most often used 
to change the style of web pages and user interfaces written in HTML and XHTML, the 
language can be applied to any kind of XML document, including plain XML, SVG and 
XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most 
websites to create visually engaging webpages, user interfaces for web applications, 
and user interfaces for many mobile applications. 

— Wikipedia 

Most relevant specifications / documentation: 

• All W3C CSS Specifications 

• Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification 

• CSS reference 

• Selectors Level 3 

Document Object Model (aka DOM) 
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The Document Object Model (DOM) is a cross-platform and language-independent 
convention for representing and interacting with objects in HTML, XHTML, and XML 
documents. The nodes of every document are organized in a tree structure, called the 
DOM tree. Objects in the DOM tree may be addressed and manipulated by using 
methods on the objects. The public interface of a DOM is specified in its application 
programming interface (API). 

— Wikipedia 

Most relevant specifications / documentation: 

• Document Object Model (DOM) Level 3 Events Specification 

• DOM Living Standard 

• W3CDOM4 

JavaScript Programming Language (aka: ECMAScript 6, ES6, JavaScript 2015) 

JavaScript is a high level, dynamic, untyped, and interpreted programming language. It 
has been standardized in the ECMAScript language specification. Alongside HTML and 
CSS, it is one of the three essential technologies of World Wide Web content 
production; the majority of websites employ it and it is supported by all modern web 
browsers without plug-ins. JavaScript is prototype-based with first-class functions, 
making it a multi-paradigm language, supporting object-oriented, imperative, and 
functional programming styles. It has an API for working with text, arrays, dates and 
regular expressions, but does not include any I/O, such as networking, storage or 
graphics facilities, relying for these upon the host environment in which it is embedded. 

— Wikipedia 

Most relevant specifications / documentation: 

• ECMAScript® 2015 Language Specification 

Web APIs (aka HTML5 and friends) 

When writing code for the Web using JavaScript, there are a great many APIs available. 
Below is a list of all the interfaces (that is, types of objects) that you may be able to use 
while developing your Web app or site. 

— Mozilla 

Most relevant documentation: 

• Web API Interfaces 

Hypertext Transfer Protocol (aka HTTP) 
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The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, 
collaborative, hypermedia information systems. HTTP is the foundation of data 
communication for the World Wide Web. 

— Wikipedia 

Most relevant specifications: 

• Hypertext Transfer Protocol — HTTP/1 .1 

• Hypertext Transfer Protocol version 2 draft-ietf-httpbis-http2-16 

Uniform Resource Locators (aka URL) 

A uniform resource locator (URL) (also called a web address) is a reference to a 
resource that specifies the location of the resource on a computer network and a 
mechanism for retrieving it. A URL is a specific type of uniform resource identifier (URI), 
although many people use the two terms interchangeably. A URL implies the means to 
access an indicated resource, which is not true of every URI. URLs occur most 
commonly to reference web pages (http), but are also used for file transfer (ftp), email 
(mailto), database access (JDBC), and many other applications. 

— Wikipedia 

Most relevant specifications: 

• Uniform Resource Locators (URL) 

• URL Living Standard 

JavaScript Object Notation (aka JSON) 

c It is the primary data format used for asynchronous browser/server communication 
(AJAJ), largely replacing XML (used by AJAX). Although originally derived from the 
JavaScript scripting language, JSON is a language-independent data format. Code for 
parsing and generating JSON data is readily available in many programming 
languages. The JSON format was originally specified by Douglas Crockford. It is 
currently described by two competing standards, RFC 7159 and ECMA-404. The ECMA 
standard is minimal, describing only the allowed grammar syntax, whereas the RFC 
also provides some semantic and security considerations. The official Internet media 
type for JSON is application/json. The JSON filename extension is .json. 

— Wikipedia 

Most relevant specifications: 

• Introducing JSON 

• JSON API 
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• The JSON Data Interchange Format 

Web Content Accessibility Guidelines (aka WCAG) & Accessible Rich Internet 
Applications (aka ARIA) 

Accessibility refers to the design of products, devices, services, or environments for 
people with disabilities. The concept of accessible design ensures both “direct access” 
(i.e. , unassisted) and "indirect access" meaning compatibility with a person's assistive 
technology (for example, computer screen readers). 

— Wikipedia 

• Accessible Rich Internet Applications (WAI-ARIA) Current Status 

• Web Accessibility Initiative (WAI) 

• Web Content Accessibility Guidelines (WCAG) Current Status 
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Front-End Dev Skills 
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Basic to advanced HTML, CSS, DOM, JavaScript, HTTP/URL, and browser skills are 
assumed for any type of front-end developer. 

Beyond HTML, CSS, DOM, JavaScript, HTTP/URL, and browser development, a front-end 
developer could be skilled in one or more of the following: 

• Content Management Systems (aka CMS) 

• Node.js 

• Cross-Browser Testing 

• Cross-Platform Testing 

• Unit Testing 

• Cross-Device Testing 

• Accessibility / WAI-ARIA 

• Search Engine Optimization (aka SEO) 

• Interaction or User Interface Design 

• User Experience 

• Usability 

• E-commerce Systems 

• Portal Systems 

• Wireframing 

• CSS Layout / Grids 

• DOM Manipulation (e.g., jQuery) 
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• Mobile Web Performance 

• Load Testing 

• Performance Testing 

• Progressive Enhancement / Graceful Degradation 

• Version Control (e.g., GIT) 

• MVC/MVVM/MV* 

• Functional Programming 

• Data Formats (e.g., JSON, XML) 

• Data APIs (e.g Restful API) 

• Web Font Embedding 

• Scalable Vector Graphics (aka SVG) 

• Regular Expressions 

• Content Strategy 

• Microdata / Microformats 

• Task Runners, Build Tools, Process Automation Tools 

• Responsive Web Design 

• Object-Oriented Programming 

• Application Architecture 

• Modules 

• Dependency Managers 

• Package Managers 

• JavaScript Animation 

• CSS Animation 

• Charts / Graphs 

• Ul Widgets 

• Code Quality Testing 

• Code Coverage Testing 

• Code Complexity Analysis 

• Integration Testing 

• Command Line / CLI 

• Templating Strategies 

• Templating Engines 

• Single Page Applications 

• XHR Requests (aka AJAX) 

• Web/Browser Security 

• HTML Semantics 

• Browser Developer Tools 
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Front-End Developers Develop For... 


A front-end developer crafts HTML, CSS, and JS that typically runs on the web platform (e.g. 
a web browser) on one of the following operating systems (aka OSs): 

• Android 

• Chromium 

• iOS 

• OSX 

• Ubuntu (or some flavor of Linux) 

• Windows Phone 

• Windows 

These operating systems typically run on one or more of the following devices: 

• Desktop computer 

• Laptop / Netbook computer 

• Mobile phone 

• Tablet 

• TV 

• Watch 

• Things (i.e. , anything you can imagine, car, refrigerator, lights, thermostat, etc.) 
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Generally speaking, front-end technologies can run on the aforementioned operating 
systems and devices using the following run time scenarios: 

• A web browser (examples: Chrome, IE, Safari, Firefox) running on an OS. 

• A headless browser (examples phantomJS) driven from a CLI running on an OS. 

• A WebView/browser tab (think iframe) embedded within a native application as a 
runtime with bridge to native APIs. WebView applications typically contain a Ul 
constructed from web technologies, (i.e., HTML, CSS, and JS). (examples: Apache 
Cordova, NW.js, Electron) 

• A native application built from web tech that is interpreted at runtime with a bridge to 
native APIs. The Ul will make use of native Ul parts (e.g., iOS native controls) not web 
technologies, (examples: NativeScript, React Native) 
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Front-End on a Team 


A front-end developer is typically only one player on a team that designs and develops web 
sites, web applications, or native applications running on web technologies. (Note: A 
developer who builds everything was once called a "web master" but as of late these rare 
and mythical developers are called "full-stack developers"). 

A bare bones team for building professional sites or software on the web will minimally 
contain the following roles. 

• Visual Designer (i.e. , fonts, colors, spacing, emotion, visuals concepts & themes) 

• Ul/lnteraction Designer/Information Architect (i.e., wireframes, specifying all user 
interactions and Ul functionality, structuring information) 

• Front-End Developer (i.e., writes code that runs in client/on device) 

• Back-End Developer (i.e., writes code that runs on server) 

The roles are ordered according to overlapping skills. A front-end developer will typically 
have a good handle on Ul/lnteraction design as well as back-end development. It is not 
uncommon for team members to fill more than one role by taking on the responsibilities of 
an over-lapping role. 

It is assumed that the team mentioned above is being directed by a project lead or some 
kind of product owner (i.e., stakeholder, project manager, project lead, etc.) 

A larger web team might include the following roles not shown above: 

• Visual Designers 

• Interface Design/Interaction Designer/Information Design 

• SEO Strategist 

• Front-End Developer 

• DevOps Engineers 

• Back-End Developer 

• API Developer 

• Database Administrator 

• QA Engineer / Testers 
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Generalist Myth 
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Image source: http://andyshora.com/full-stack-developers.html 

The roles required to design and develop a web solution require a deep skill set and vast 
experience in the area of visual design, U I/interaction design, front-end development, and 
back-end development. Any person (aka generalist or full-stack developer/designer) who 
can fill one or more of these 4 roles at a professional level is a rare exception to the rule. 

Pragmatically, you should seek to be, or seek to hire, an expert in one of these roles. Those 
who claim to operate at an expert level at one or more of these roles are exceptionally rare 
and more than likely mythical, given modern stacks. 
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Front-End Interviews 


Questions you may get asked: 

• 10 Interview Questions Every JavaScript Developer Should Know 

• Front-End Job Interview Questions 

• Front End Web Development Quiz 

• Interview Questions for Front-End-Developer 

• JavaScript Web Quiz 

Questions you ask: 

• An open source list of developer questions to ask prospective employers 
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Front-End Job Boards 


A plethora of technical job listing outlets exist. The narrowed list below are currently the most 
relevant resources for finding a specific front-end position/career. 

• angularjobs.com 

• authenticjobs.com 

• careers.stackoverflow.com 

• css-tricks.com/jobs 

• frontenddeveloperjob.com 

• glassdoor.com 

• jobs.emberjs.com 

• jobs.github.com 

• jobs.jsninja.com 

• weworkremotely.com 
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Front-End Salaries 


The national average in the U.S for a front-end developer is $75k. 

An experienced front-end developer potentially can live wherever they want (i.e., work 
remotely) and make over $150k a year (visit angel. co, sign-up, review front-end jobs over 
$1 50k). 
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How Front-End Developers Are Made 



Image source: http://cdn.skilledup.com/wp-content/uploads/2014/11/life-of-front-end- 
developer-infographic-Secondary.jpg 


How exactly does one become a front-end developer? Well, it's complicated. Still today you 
can't go to college and expect to graduate with a degree in front-end engineering. And, I 
rarely hear of or meet front-end developers who suffered through what is likely a deprecated 
computer science degree or graphic design degree to end up writing HTML, CSS, and 
JavaScript professionally. In fact, most of the people working on the front-end, even today, 
generally seem to be self taught and not traditionally trained as a programmer. Why is this 
the case? 


A front-end developer is not a focused visual designer or an interaction designer. Design 
school is not exactly the place to hone front-end skills. A front-end developer is not exactly a 
traditionally trained computer science graduate either. Focusing on either doesn't prepare a 
person for front-end development. And, in fact, following the traditional paths for either in the 
higher education systems of America (i.e., College) can derail a person from potentially 
finding a doorway into a practice where actual experience is king. Today, if you want to be a 
front-end developer, you teach yourself or you take what is likely a non accredited program, 
course, bootcamp, or class. 
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A front-end engineer crafts the skeleton that the user interface rests upon. They must, at 
times, care as much about the interaction design as they do about the underlying code that 
creates the Ul interactions. Therefore, many in practice today do not come to front-end 
engineering with programming skills, but, instead, from the other direction. That is, front-end 
development seems to be filled with more designer types turned developer than programmer 
types turned front-end developer. Of course, as JavaScript has grown up, so has the desire 
by more traditionally trained programmers to bring their knowledge to the front-end practice. 
If you are not aware, front-end developers have not always been considered by "real" 
programmers as, well, programmers. But times are a changing. 

With all of that said, I believe that the path to a career as a front-end developer is very much 
an unknown process. What I can say is that to become a front-end engineer one must know 
and use HTML, CSS, DOM, and JavaScript at a high level without ignoring interaction 
design or traditional programming know how. In fact, from my experience, the best front-end 
developers often have a mastery understanding of interaction design and programming, but 
from the context of the web platform (i.e., browsers, HTML, CSS, DOM, and JavaScript). 

And for whatever reason, this knowledge is often found not given. That is to say, front-end 
engineering still seems very much to be a practice made up of self taught people, as 
opposed to a field that corresponds directly to an educational focus from an organized and 
accredited higher learning situation. 

If you were to set out today to become a front-end developer I would loosely strive to follow 
the process outlined below. The process assumes you are your own best teacher. 

1. Learn, roughly, how the web works. Make sure you know the "what" and "where" of 
Domains, DNS, URLs, HTTP, networks, browsers, servers/hosting, databases, JSON, 
data APIs, HTML, CSS, DOM, and JavaScript. The goal is to make sure you loosely 
know how it all works together and exactly what each part is doing. Focus on the high 
level outlines for front-end architectures. Start with simple web pages and briefly study 
native web applications (aka SPAs). 

2. Learn HTML, CSS, Accessibility, and SEO. 

3. Learn the fundamentals of Ul design patterns, interaction design, user experience 
design, and usability. 

4. Learn the fundamentals of programming 

5. Learn JavaScript 

6. Learn JSON and data APIs 

7. Learn CLI/command line 

8. Learn the practice of software engineering (i.e., Application design/architecture, 
templates, Git, testing, monitoring, automating, code quality, development 
methodologies). 

9. Get opinionated and customize your tool box with whatever makes sense to your brain. 

10. Learn Node.js 


How FDs Are Made 


29 


Front-end Handbook 


Where you actually stop in the process is what will separate a front-end HTML/CSS 
developer from an expert level front-end application/JavaScript developer. 

A short word of advice on learning. Learn the actual underlying technologies, before learning 
abstractions. Don't learn jQuery, learn the DOM. Don't learn SASS, learn CSS. Don't learn 
HAML, learn HTML. Don't learn CoffeeScript, learn JavaScript. Don't learn Handlebars, learn 
JavaScript ES6 templates. Don't just use Bootstrap, learn Ul patterns. When getting your 
start, you should fear most things that conceal complexity. Abstracts in the wrong hands can 
give the appearance of advanced skills, while all the time hiding the fact that a developer 
has an inferior understanding of the basics or underlying concepts. 

The rest of this book points a reader to the resources and tools to follow my previously 
suggested process. It is assumed that you are not only learning, but also doing as you learn 
and investigate tools. Some suggest only doing. While others suggest only learning about 
doing. I suggest you find a mix of both that matches how your brain works and do that. But, 
for sure, it is a mix! So, don't just read about it, do it. Learn, do. Learn, do. Repeat 
indefinitely because things change fast. This is why learning the fundamentals, and not 
abstractions, are so important. 

I should mention that lately a lot of non-accredited front-end code schools/bootcamps have 
emerged. These avenues of becoming a front-end developer are teacher directed in 
classroom (virtual and physical) courses, which follow a more traditional style of learning 
from an official instructor (i.e., syllabus, test, quizzes, projects, team projects, grades, etc.). I 
have more to say about these institutions in the direct learning section of this handbook. In 
brief, this is the web, everything you need to learn is on the web for the taking (costing little 
to nothing). However, if you need someone to tell you how to take what is actually free, and 
hold you accountable for learning it, you might consider an organized course. Otherwise, I 
am not aware of any other profession that is practically free for the taking with an internet 
connection and a burning desire for knowledge. 

If you want to get started immediately I'd suggest the following general overviews of the 
practice of front-end development: 

• Frontend Guidelines [read] 

• Being a web developer [read] 

• Isobar Front-End Code Standards [read] 

• Web Fundamentals [read] 

• Front-End Curriculum [read] 

• freeCodeCamp [interact] 

• Planning a Front-end JS Application [watch] 

• So, You Want to be a Front-End Engineer [watch] 

• Front End Web Development Career Kickstart [watch][$] 

• Front End Web Development: Get Started [watch][$] 
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• Front-End Web Development Quick Start With HTML5, CSS, and JavaScript [watch][$] 

• Introduction to Web Development [watch][$] 

• Foundations of Front-End Web Development [watch][$] 

• Lean Front-End Engineering [watch][$] 

• A Baseline for Front-End [JS] Developers: 2015 [read] 

• Learn Front End Web Development [watch][$] 

• Front-End Dev Mastery [watch][$] 

• Front-End Web Developer Nanodegree [watch][$] 
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Part II: Learning 


Part two identifies self-directed (i.e. , at your own pace when you want) and directed (i.e., 
formal class room specific times and dates) resources for learning to become a front-end 
developer. 

Note that just because a learning resource is listed, or a category of learning is documented, 
I am not suggesting that a front-end developer learn everything. That would be absurd. 
Choose your own slice of expertise within the profession. I'm providing the possibilities of 
what could be mastered in the field. 
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Self Directed Learning 


This section focuses on free and paid resources (video training, books, etc.) that an 
individual can use to direct their own learning process and career as a front-end developer. 

The resources include free material and paid material. Paid material will be indicated with 
[$]■ 

The author believes that anyone with the right determination and dedication can teach 
themselves how to be a front-end developer. All that is required is a computer connected to 
the web and some cash for books and video training. 

Below are a few video learning outlets (tech focused) I generally recommend pulling content 
from: 

• codecademy.com 

• codeschool.com 

• egghead. io 

• eventedmind.com 

• Frontend Masters 

• Khan Academy 

• laracasts.com 

• lynda.com [careful, quality varies] 

• mijingo.com 

• pluralsight.com [careful, quality varies] 

• Tagtree 

• Treehouse 

• tutsplus.com 

• Udacity [careful, quality varies] 
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Learn Internet/Web 


The Internet is a global system of interconnected computer networks that use the 
Internet protocol suite (TCP/IP) to link several billion devices worldwide. It is a network 
of networks that consists of millions of private, public, academic, business, and 
government networks of local to global scope, linked by a broad array of electronic, 
wireless, and optical networking technologies. The Internet carries an extensive range 
of information resources and services, such as the inter-linked hypertext documents 
and applications of the World Wide Web (WWW), electronic mail, telephony, and peer- 
to-peer networks for file sharing. 

— Wikipedia 

• How Does the Internet work - W3C [read] 

• How Does the Internet Work? - Stanford Paper [read] 

• How the Internet Works [watch] 

• How the Internet Works in 5 Minutes [watch] 

• How the Web Works [watch][$] 

• What Is the Internet? Or, "You Say Tomato, I Say TCP/IP" [read] 
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Learn Web Browsers 


A web browser (commonly referred to as a browser) is a software application for 
retrieving, presenting, and traversing information resources on the World Wide Web. An 
information resource is identified by a Uniform Resource Identifier (URI/URL) and may 
be a web page, image, video or other piece of content. Hyperlinks present in resources 
enable users easily to navigate their browsers to related resources. Although browsers 
are primarily intended to use the World Wide Web, they can also be used to access 
information provided by web servers in private networks or files in file systems. 

— Wikipedia 

The most commonly used browsers (on any device) are: 

1. Chrome (engine: Blink + /8) 

2. Firefox (engine: Geckc + SpiderMonkey) 

3. Internet Explorer (engine: Trident + Chakra) 

4. Safari (engine: Webkit + SquirrelFish) 


StatCounter Global Stats 

Top 12 Browser Versions Combining Chrome and Firefox (5+ ) from Jan 2015 to Jan 2016 



50% 


Image source: http://gs. statcounter. com/#all-browser_version_partially_combined-ww- 
monthly-20 1501 -20 1601 -bar 

Evolution of Browsers & Web Technologies (i.e., APIs) 


Learn Web Browsers 


35 


Front-end Handbook 


• evolutionoftheweb.com [read] 

• Timeline of web browsers [read] 

The Most Commonly Used Headless Browser Are: 

• PhantomJS (engine: Webkit + SquirrelFish) 

• SlimerJS (engine: Gecko + SpiderMonkey) 

• TrifleJS (engine: Trident + Chakra) 


How Browsers Work 


• 20 Things I Learned About Browsers and the Web [read] 

• Fast CSS: How Browsers Lay Out Web Pages [read] 

• How Browsers Work: Behind the scenes of modern web browsers [read] 

• So How Does the Browser Actually Render a Website [watch] 

• What Every Frontend Developer Should Know About Webpage Rendering [read] 
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Image source: http://www.html5rocks. com/en/tutorials/internals/howbrowserswork/ 

Optimizing for Browsers: 

• Browser Rendering Optimization [watch] 

• Website Performance Optimization [watch] 

Browser Security 

• Browser Security Handbook [read] 

• Frontend Security [watch] 

• HTML5 Security Cheatsheet [read] 
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• Security for Web Developers: Using JavaScript, HTML, and CSS [read][$] 

• The Tangled Web: A Guide to Securing Modern Web Applications read 

Comparing Browsers 

• Comparison of Web Browsers [read] 

Developing for Browsers 

In the past, a front-end developer spent a lot of time making code work in several different 
browsers. This was once a bigger issue than it is today, unless you have to write code for 
older browsers (i.e., <IE8). This still remains an issue today, just not one that demands so 
much of the front-end developers time and brain cycles. The fact of the matter is modern 
abstractions (e.g., jQuery, pre-processors, transpilers) have done away with a lot of browser 
inconsistency issues. 

Evergreen Browsers 

The latest versions of browsers are considered evergreen browsers. That is, in theory they 
are suppose to automatically update themselves silently without prompting the user. This 
move towards self updating browsers has been in reaction to the slow process of eliminating 
older browsers. Older browsers are complicated to develop for given their deviations from 
the commonalities between modern browsers (i.e., new specifications and this rate of 
change). 

Picking a Browser 

As of today, most front-end developers use Chrome and the tools available to a developer, 
"Chrome Dev Tools". However, all of the browsers offer a flavor of developer tools. Picking 
one to use for development is a subjective matter. The more important issue is knowing 
which browsers you have to support and testing in each as you develop. Select whichever 
browser makes sense to your brain and gets the job done. I suggest using Chrome simply 
because the developer tools are consistently improving and at this time contain the most 
robust features. 

Browser Hacks 

• browserhacks.com [read] 
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Learn Domain Name System (aka DNS) 

The Domain Name System (DNS) is a hierarchical distributed naming system for 
computers, services, or any resource connected to the Internet or a private network. It 
associates various information with domain names assigned to each of the participating 
entities. Most prominently, it translates domain names, which can be easily memorized 
by humans, to the numerical IP addresses needed for the purpose of computer services 
and devices worldwide. The Domain Name System is an essential component of the 
functionality of most Internet services because it is the Internet's primary directory 
service. 

— Wikipedia 
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• DNS Explained [watch] 

• How DNS Works [read] 
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Learn HTTP/Networks (Including CORS & 
WebSockets) 

HTTP - The Hypertext Transfer Protocol (HTTP) is an application protocol for 
distributed, collaborative, hypermedia information systems. HTTP is the foundation of 
data communication for the World Wide Web. 

— Wikipedia 

CORS - Cross-origin resource sharing (CORS) is a mechanism that allows restricted 
resources (e.g., fonts) on a web page to be requested from another domain outside the 
domain from which the resource originated. 

— Wikipedia 

WebSockets - WebSocket is a protocol providing full-duplex communication channels 
over a single TCP connection. The WebSocket protocol was standardized by the IETF 
as RFC 6455 in 2011 , and the WebSocket API in Web IDL is being standardized by the 
W3C. 

— Wikipedia 

HTTP 

• High Performance Browser Networking: What Every Web Developer Should Know 
About Networking and Web Performance [read] 

• HTTP/2 Frequently Asked Questions [read] 

• HTTP Fundamentals [watch][$] 

• HTTP: The Protocol Every Web Developer Must Know - Part 1 [read] 

• HTTP: The Protocol Every Web Developer Must Know - Part 2 [read] 

• HTTP Succinctly [read] 

CORS 

• CORS in Action [read][$] 

• HTTP Access Control (CORS) [read] 

• HTTP Status Codes in 60 Seconds [watch] 

WebSockets 

• Connect the Web With WebSockets [watch] 

• WebSocket: Lightweight Client-Server Communications [read][$] 
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• The WebSocket Protocol [read] 
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Learn Web Hosting 


A web hosting service is a type of Internet hosting service that allows individuals and 
organizations to make their website accessible via the World Wide Web. Web hosts are 
companies that provide space on a server owned or leased for use by clients, as well 
as providing Internet connectivity, typically in a data center. Web hosts can also provide 
data center space and connectivity to the Internet for other servers located in their data 
center, called colocation, also known as Housing in Latin America or France. 

— Wikipedia 



Visitors type in your 
website URL 


Image source: http://www.aiphaeiite. com.sg/sitev2/images/stories/webhostdemo.jpg 

General Learning: 

• Ultimate Guide to Web Hosting [read] 

• Web Hosting Beginner Guide [read] 

• Web Hosting for Dummies [read][$] 
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Learn General Front-End Development 


General Learning: 

• A Baseline for Front-End [JS] Developers: 2015 [read] 

• Being a web developer [read] 

• Foundations of Front-End Web Development [watch][$] 

• freeCodeCamp [interact] 

• Front-End Curriculum [read] 

• Front-End Dev Mastery [watch][$] 

• Front-End Web Developer Nanodegree [watch][$] 

• Front End Web Development Career Kickstart [watch][$] 

• Front End Web Development: Get Started [watch][$] 

• Front-End Web Development Quick Start With HTML5, CSS, and JavaScript [watch][$] 

• Frontend Guidelines [read] 

• Introduction to Web Development [watch][$] 

• Isobar Front-End Code Standards [read] 

• Lean Front-End Engineering [watch][$] 

• Learn Front End Web Development [watch][$] 

• Planning a Front-End JS Application [watch] 

• So, You Want to Be a Front-End Engineer [watch] 

• Web Fundamentals [read] 

General Front-End Newsletters, News Outlets, & Podcasts: 

• The Big Web Show 

• Fresh Brewed Frontend 

• Front-End Dev Weekly 

• frontendfront.com 

• Mobile Web Weekly 

• Open Web Platform Daily Digest 

• O'Reilly Web Platform Radar 

• shoptalkshow.com 

• The Web Ahead 

• The Web Platform Podcast 

• webtoolsweekly.com 
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Learn User Interface/Interaction Design 


User Interface Design - User interface design (Ul) or user interface engineering is the 
design of user interfaces for machines and software, such as computers, home 
appliances, mobile devices, and other electronic devices, with the focus on maximizing 
the user experience. The goal of user interface design is to make the user's interaction 
as simple and efficient as possible, in terms of accomplishing user goals (user-centered 
design). 

— Wikipedia 

Interaction Design Pattern - A design pattern is a formal way of documenting a 
solution to a common design problem. The idea was introduced by the architect 
Christopher Alexander for use in urban planning and building architecture, and has 
been adapted for various other disciplines, including teaching and pedagogy, 
development organization and process, and software architecture and design. 

— Wikipedia 

User Experience Design - User Experience Design (UXD or UED or XD) is the 
process of enhancing user satisfaction by improving the usability, accessibility, and 
pleasure provided in the interaction between the user and the product. User experience 
design encompasses traditional human-computer interaction (HCI) design, and 
extends it by addressing all aspects of a product or service as perceived by users. 

— Wikipedia 

Human-Computer Interaction - Human-computer interaction (HCI) researches the 
design and use of computer technology, focusing particularly on the interfaces between 
people (users) and computers. Researchers in the field of HCI both observe the ways in 
which humans interact with computers and design technologies that lets humans 
interact with computers in novel ways. 

— Wikipedia 

Minimally I'd suggest reading the following canonical texts on the matter so one can build 
proper user interfaces. 

• About Face: The Essentials of Interaction Design [read][$] 

• Designing Interfaces [read][$] 

• Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability [read][$] 


Learn Ul/lnteraction Design 


43 


Front-end Handbook 


Learn HTML & CSS 


HTML - HyperText Markup Language, commonly referred to as HTML, is the standard 
markup language used to create web pages. Web browsers can read HTML files and 
render them into visible or audible web pages. HTML describes the structure of a 
website semantically along with cues for presentation, making it a markup language, 
rather than a programming language. 

— Wikipedia 

CSS - Cascading Style Sheets (CSS) is a style sheet language used for describing the 
look and formatting of a document written in a markup language. Although most often 
used to change the style of web pages and user interfaces written in HTML and 
XHTML, the language can be applied to any kind of XML document, including plain 
XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone 
technology used by most websites to create visually engaging webpages, user 
interfaces for web applications, and user interfaces for many mobile applications. 

— Wikipedia 

Liken to constructing a house, one might consider HTML the framing and CSS to be the 
painting & decorating. 

General Learning: 

• Absolute Centering in CSS [read] 

• codecademy.com HTML & CSS [interact] 

• CSS Positioning [watch][$] 

• Front End Web Development: Get Started [watch][$] 

• Front-End Web Development Quick Start With HTML5, CSS, and JavaScript [watch][$] 

• HTML and CSS: Design and Build Websites [read][$] 

• HTML Document Flow [watch][$] 

• HTML Mastery: Semantics, Standards, and Styling [read][$] 

• Intro to HTML/CSS: Making webpages [watch] 

• Introduction to HTML5 and CSS3 [watch][$] 

• Learn to Code HTML & CSS [read] 

• Learn CSS Layout [read] 

• Semantic HTML: How to Structure Web Pages [watch] 

• Solid HTML Form Structure [watch] 

• Understanding the CSS Box Modei [watch] 
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Mastering: 

• A Complete Guide to Flexbox [read] 

• atozcss.com [watch] 

• CSS Diner [interact] 

• CSS Selectors from CSS4 till CSS1 [read] 

• CSS3 In-Depth [watch][$] 

• What the Flexbox?! A Simple, Free 20 Video Course That Will Help You Master CSS 
Flexbox [watch] 

References/Docs: 

• CSS Triggers. ..a Game of Layout, Paint, and Composite 

• cssvalues.com 

• HTML Attribute Reference 

• htmlelement.info 

• MDN CSS Reference 

• MDN HTML Element Reference 

Glossary: 

• CSS Glossary - Programming Reference for CSS Covering Comments, Properties, and 
Selectors 

• HTML Glossary Programming Reference for HTML elements 

Standards/Specifications: 

• All W3C CSS Specifications 

• All W3C HTML Spec 

• Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification 

• The Elements of HTML from the Living Standard 

• Global Attributes 

• The HTML Syntax from the Living Standard 

• HTML5 from W3C : 5th major revision of the core language of the World Wide Web 

• Selectors Level 3 

Architecting CSS: 

• Atomic Design [read] 

• OOCSS [read] 

• SMACSS [read][$] 

• SMACSS [watch][$] 

Authoring Conventions: 
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• cssguidelin.es [read] 

• Frontend Guidelines Questionnaire [read] 

• Google HTML/CSS Style Guide 

• Idiomatic CSS [read] 

• Standards for Developing Flexible, Durable, and Sustainable HTML and CSS [read] 

HTML/CSS Newsletters: 

• CSS Weekly 

• HTML 5 Weekly 
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Learn Search Engine Optimization 


Search engine optimization (SEO) is the process of affecting the visibility of a website 
or a web page in a search engine's unpaid results — often referred to as "natural," 
"organic," or "earned" results. In general, the earlier (or higher ranked on the search 
results page), and more frequently a site appears in the search results list, the more 
visitors it will receive from the search engine's users. SEO may target different kinds of 
search, including image search, local search, video search, academic search, news 
search and industry-specific vertical search engines. 

— Wikipedia 

General Learning: 

• Google Search Engine Optimization Starter Guide [read] 

• SEO Fundamentals From David Booth [watch][$] 

• SEO Fundamentals From Paul Wilson [watch][$] 

• SEO Tutorial for Beginners 2015 [read] 

• SEO for Web Designers [watch][$] 
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Learn JavaScript 


JavaScript is a high level, dynamic, untyped, and interpreted programming language. It 
has been standardized in the ECMAScript language specification. Alongside HTML and 
CSS, it is one of the three essential technologies of World Wide Web content 
production; the majority of websites employ it and it is supported by all modern web 
browsers without plug-ins. JavaScript is prototype-based with first-class functions, 
making it a multi-paradigm language, supporting object-oriented, imperative, and 
functional programming styles. It has an API for working with text, arrays, dates and 
regular expressions, but does not include any I/O, such as networking, storage or 
graphics facilities, relying for these upon the host environment in which it is embedded. 

— Wikipedia 

General Learning: 

• codecademy.com JavaScripl [interact] 

• Crockford on JavaScript - Volume 1 : The Early Years [watch] 

• Crockford on JavaScript - Chapter 2: And Then There Was JavaScript [watch] 

• Crockford on JavaScript - Act III: Function the Ultimate [watch] 

• Crockford on JavaScript - Episode IV: The Metamorphosis of Ajax [watch] 

• Crockford on JavaScript - Part 5: The End of All Things [watch] 

• Crockford on JavaScript - Scene 6: Loopage [watch] 

• JavaScript Enlightenment [read] 

• JavaScript Modules [read] 

• JavaScript Patterns [read][$] 

• JS.Next: ES6 [watch][$] 

• The Principles of Object-Oriented JavaScript [read][$] 

• Professional JavaScript for Web Developers [read][$] 

• Setting up ES6 

• Speaking JavaScript [read] 

• Understanding ECMAScript 6 [read] 

• You Don't Know JS: Up & Going [read] * 

Mastering: 

• Advanced JavaScript [watch][$] 

• ECMA-262 by Dmitry Soshnikov [read] 

• Eloquent JavaScript [read] 

• Functional JavaScript: Introducing Functional Programming with Underscore.js [read][$] 
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• High Performance JavaScript (Build Faster Web Application Interfaces) [read][$] 

• JavaScript Allonge [read][$] 

• JavaScript the Good Parts [watch][$] 

• JavaScript with Promises [read][$] 

• JavaScript Regular Expression Enlightenment [read] 

• Test-Driven JavaScript Development [read][$] 

• Using Regular Expressions [watch][$] 

• You Don't Know JS: Async & Performance [read] 

• You Don't Know JS: ES6 & Beyond [read] 

• You Don't Know JS: Scope & Closures [read] 

• You Don't Know JS: this & Object Prototypes [read] 

• You Don't Know JS: Types & Grammar [read] 

References/Docs: 

• MDN JavaScript Reference 

Glossary/Encyclopedia/Jargon: 

• 'he JavaScript Encyclopedia 

• JavaScript Glossary 

• Simplified JavaScript Jargon 

Standards/Specifications: 

• ECMAScript® 2015 Language Specification 

• Status, Process, and Documents for ECMA262 

Style: 

• Airbnb JavaScript Style Guide 

• Node.js Style Guide 

• Principles of Writing Consistent, Idiomatic JavaScript 

JavaScript Newsletters, News, & Podcasts: 

• Echo JS 

• FiveJS 

• JavaScript Jabber 

• JavaScript Kicks 

• JavaScript Live 

• JavaScript Weekly 

• JavaScript.com 
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Learn Web Animation 


General Learning: 

• Adventures in Web Animations [$][watch] 

• Animating With Snap.svg [$][watch] 

• Animation in CSS3 and HTML5 [$][watch] 

• Create Animations in CSS [read & watch] 

• CSS Animation in the Real World [$][watch] 

• Foundation HTML5 Animation with JavaScript [$][read] 

• Learn to Create Animations in JavaScript [read & watch] 

• State of the Animation 2015 [watch] 

• Web Animation using JavaScript: Develop & Design (Develop and Design) [$][read] 

Standards/Specifications: 

• Web Animations 
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Learn DOM, BOM, & jQuery 


DOM - The Document Object Model (DOM) is a cross-platform and language- 
independent convention for representing and interacting with objects in HTML, XHTML, 
and XML documents. The nodes of every document are organized in a tree structure, 
called the DOM tree. Objects in the DOM tree may be addressed and manipulated by 
using methods on the objects. The public interface of a DOM is specified in its 
application programming interface (API). 

— Wikipedia 

BOM - The Browser Object Model (BOM) is a browser-specific convention referring to 
all the objects exposed by the web browser. Unlike the Document Object Model, there 
is no standard for implementation and no strict definition, so browser vendors are free 
to implement the BOM in any way they wish. 

— Wikipedia 

jQuery - jQuery is a cross-platform JavaScript library designed to simplify the client- 
side scripting of HTML. jQuery is the most popular JavaScript library in use today, with 
installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is 
free, open-source software licensed under the MIT License. 

— Wikipedia 

The ideal path, but certainly the most difficult, would be to first learn JavaScript, then the 
DOM, then jQuery. However, do what makes sense to your brain. Most front-end developers 
learn about JavaScript and then DOM by way of first learning jQuery. Whatever path you 
take, just make sure JavaScript, then DOM, or jQuery don't become a black box. 

General Learning: 

• Codecademy.com jQuery [watch] 

• The Document Object Model [read] 

• HTML/JS: Making Webpages Interactive [watch] 

• HTML/JS: Making Webpages Interactive with jQuery [watch] 

• jQuery Enlightenment [read] 

Mastering: 

• AdvancED DOM Scripting: Dynamic Web Design Techniques [read][$] 

• Advanced JS Fundamentals to jQuery & Pure DOM Scripting [watch][$] 
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• Douglas Crockford: An Inconvenient API - The Theory of the DOM [watch] 

• DOM Enlightenment [read][$] or read online for free 

• Fixing Common jQuery Bugs [watch][$] 

• jQuery-Free JavaScript [watch][$] 

• jQuery Tips and Tricks [watch][$] 

References/Docs: 

• jQuery Docs 

• MDN Browser Object Model 

• MDN Document Object Model 

• MDN Event reference 

• MSDN Document Object Model (DOM) 

Standards/Specifications: 

• Document Object Model (DOM) Level 3 Events Specification 

• Document Object Model (DOM) Technical Reports 

• DOM Living Standard 

• W3C DOM4 
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Learn Web Fonts & Icons 


Web typography refers to the use of fonts on the World Wide Web. When HTML was 
first created, font faces and styles were controlled exclusively by the settings of each 
Web browser. There was no mechanism for individual Web pages to control font display 
until Netscape introduced the <font> tag in 1995, which was then standardized in the 
HTML 3.2 specification. However, the font specified by the tag had to be installed on the 
user's computer or a fallback font, such as a browser's default sans-serif or monospace 
font, would be used. The first Cascading Style Sheets specification was published in 
1996 and provided the same capabilities. 

The CSS2 specification was released in 1998 and attempted to improve the font 
selection process by adding font matching, synthesis and download. These techniques 
did not gain much use, and were removed in the CSS2.1 specification. However, 
Internet Explorer added support for the font downloading feature in version 4.0, 
released in 1997. Font downloading was later included in the CSS3 fonts module, and 
has since been implemented in Safari 3.1, Opera 10 and Mozilla Firefox 3.5. This has 
subsequently increased interest in Web typography, as well as the usage of font 
downloading. 

— Wikipedia 

General Learning: 

• Beautiful Web Type a Showcase of the Best Typefaces from the Google Web Fonts 
Directory [read] 

• Learn Web Fonts [read] 

• Quick Guide to Webfonts via @font-face [read] 

• Responsive Typography [watch][$] 

• Typography for the Web [watch][$] 
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Learn Accessibility 


Accessibility refers to the design of products, devices, services, or environments for 
people with disabilities. The concept of accessible design ensures both “direct access” 
(i.e. , unassisted) and "indirect access" meaning compatibility with a person's assistive 
technology (for example, computer screen readers). 

Accessibility can be viewed as the "ability to access" and benefit from some system or 
entity. The concept focuses on enabling access for people with disabilities, or special 
needs, or enabling access through the use of assistive technology; however, research 
and development in accessibility brings benefits to everyone. 

Accessibility is not to be confused with usability, which is the extent to which a product 
(such as a device, service, or environment) can be used by specified users to achieve 
specified goals with effectiveness, efficiency and satisfaction in a specified context of 
use. 

Accessibility is strongly related to universal design which is the process of creating 
products that are usable by people with the widest possible range of abilities, operating 
within the widest possible range of situations. This is about making things accessible to 
all people (whether they have a disability or not). 

— Wikipedia 

General Learning: 

• Foundations of UX: Accessibility [watch][$] 

• Introduction to Web Accessibility - Google Open Online Education [watch] 

• Introduction to Web Accessibility - WAI [read] 

• Universal Design for Web Applications: Web Applications That Reach Everyone [read] 

[$] 

• Web Accessibility: Getting Started [watch][$] 

• A Web for Everyone [read][$] 

Standards/Specifications: 

• Accessible Rich Internet Applications (WAI-ARIA) Current Status 

• Web Accessibility Initiative (WAI) 

• Web Content Accessibility Guidelines (WCAG) Current Status 
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Learn Web/Browser APIs 


The BOM and the DOM are not the only browser APIs that are made available on the web 
platform inside of browsers. Everything that is not specifically the DOM or BOM, but an 
interface for programming the browser could be considered a web or browser API (tragically 
in the past some of these APIs have been called HTML5 APIs which confuses their own 
specifics/standardize with the actual HTML5 specification specify the HTML5 markup 
language). Note that web or browser APIs do include device APIs (e.g., 

Navigator. getBattery() ) that are available through the browser on tablet and phones 
devices. 
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You should be aware of and learn, where appropriate, web/browser APIs. A good tool to use 
to familiarize oneself with all of these APIs would be to investigate the HTML5test.com 

results for the 5 most current browsers. 

Learn: 
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• Dive Into HTML5 [read] 

• Pro HTML5 Programming [read] 

Learn Audio: 

• Add Sound to Your Site With Web Audio [watch] 

• Fun With Web Audio [watch] 

• HTML5 Canvas [read] 

Learn Canvas: 

• Web Audio API [read] 

Additionally, MDN has a great deal of information about web/browser APIs. 

• MDN Web API Reference 

• MDN Web APIs Interface Reference - All Interfaces, Arranged Alphabetically 

• MDN WebAPI - Lists Device Access APIs and Other APIs Useful for Applications 

Keep in mind that not every API is specified by the W3C or WHATWG. 

In addition to MDN, you might find the following resources helpful: 

• The HTML 5 JavaScript API Index 

• HTML5 Overview 

• platform.html5.org 
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Learn JSON (JavaScript Object Notation) 


JSON, (canonically pronounced sometimes JavaScript Object Notation), is an open 
standard format that uses human-readable text to transmit data objects consisting of 
attribute-value pairs. It is the primary data format used for asynchronous 
browser/server communication (AJAJ), largely replacing XML (used by AJAX). 

Although originally derived from the JavaScript scripting language, JSON is a language- 
independent data format. Code for parsing and generating JSON data is readily 
available in many programming languages. 

The JSON format was originally specified by Douglas Crockford. It is currently 
described by two competing standards, RFC 7159 and ECMA-404. The ECMA 
standard is minimal, describing only the allowed grammar syntax, whereas the RFC 
also provides some semantic and security considerations. The official Internet media 
type for JSON is application/json. The JSON filename extension is .json. 

— Wikipedia 

General Learning: 

• Introduction to JavaScript Object Notation: ATo-the-Point Guide to JSON [read][$] 

• json.com [read] 

• What is JSON [watch] 

References/Docs: 

• json.org [read] 

Standards/Specifications: 

• ECMA-404 The JSON Data Interchange Format 

• RFC 7159 The JavaScript Object Notation (JSON) Data Interchange Format 

Architecting: 

• JSON API 
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Learn Static Site Generators 


Static site generators, typically written using server side code (i.e. , ruby, php, python, 
nodeJS, etc.), produces static HTML files from static text/data + templates that is indenting 
to be sent from a server to the client statically without a dynamic nature. 

General Learning: 

• Static Site Generators [read] 
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Learn Front-End Application Architecture 


• Build an App with React and Ampersand [watch][$] 

• Building Modern Single-Page Web Applications [watch][$] 

• Eloquent JavaScript: Modules [read] 

• A Field Guide to Static Apps [read] 

• Field Guide to Web Applications [read] 

• Frontend Guidelines Questionnaire [read] 

• Human JavaScript [read] 

• JavaScript Application Design [read][$] 

• Nicholas Zakas: Scalable JavaScript Application Architecture [watch] 

• Organizing JavaScript Functionality [watch][$] 

• Patterns for Large-Scale JavaScript Application Architecture [read] 

• Programming JavaScript Applications [read] 

• Terrific [read] 

• Ul Architecture [watch][$] 

• Web Ul Architecture [watch][$] 
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Learn Interface/API Design 

Data (Most Likely JSON) APIs 

• Build APIs You Won't Hate [$][read] 

• JSON API [read] 

JavaScript APIs 

• Designing Better JavaScript APIs [read] 

• Writing JavaScript APIs [read] 
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Learn Web Developer Tools 


Web development tools allow web developers to test and debug their code. They are 
different from website builders and IDEs in that they do not assist in the direct creation 
of a webpage, rather they are tools used for testing the user facing interface of a 
website or web application. 

Web development tools come as browser add-ons or built in features in web browsers. 
The most popular web browsers today like, Google Chrome, Firefox, Opera, Internet 
Explorer, and Safari have built in tools to help web developers, and many additional 
add-ons can be found in their respective plugin download centers. 

Web development tools allow developers to work with a variety of web technologies, 
including HTML, CSS, the DOM, JavaScript, and other components that are handled by 
the web browser. Due to the increasing demand from web browsers to do more popular 
web browsers have included more features geared for developers. 

— Wikipedia 

While most browsers come equipped with web developer tools, the Chrome developer tools 
are currently the most talked about and widely used tools available. 

I'd suggest learning and using the Chrome web developer tools, simply because the best 
resources for learning web developer tools revolves around Chrome DevTools. 

Learn Chrome Web Developer Tools 

• Chrome Developer Tools [watch][$] 

• Explore and Master Chrome DevTools 

• Using The Chrome Developer Tools [watch][$] 

Chrome Web Developer Tools Docs: 

• Command Line API Reference 

• Keyboard & Ul Shortcuts Reference 

• Per-Panel Documentation 

• Settings 

News/Newsletters/Podcasts/Tips: 

• Dev Tips 
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Learn Command Line 


A command-line interface or command language interpreter (CLI), also known as 
command-line user interface, console user interface, and character user interface 
(CUI), is a means of interacting with a computer program where the user (or client) 
issues commands to the program in the form of successive lines of text (command 
lines). 

— Wikipedia 

General Learning: 

• Codecademy: Learn the Command Line [watch] 

• The Command Line Crash Course [read] 

• Command Line Power User [watch] 

• Learn Enough Command Line to Be Dangerous [read] [free to $] 

• Meet the Command Line [watch][$] 

Mastering: 

• Advanced Command Line Techniques [watch][$] 
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Learn Node.js 


Node.js is an open-source, cross-platform runtime environment for developing server- 
side web applications. Node.js applications are written in JavaScript and can be run 
within the Node.js runtime on OS X, Microsoft Windows, Linux, FreeBSD, NonStop, [3] 
IBM AIX, IBM System z and IBM i. Its work is hosted and supported by the Node.js 
Foundation, [4] a collaborative project at Linux Foundation. [5] 

Node.js provides an event-driven architecture and a non-blocking I/O API designed to 
optimize an application's throughput and scalability for real-time web applications. It 
uses Google V8 JavaScript engine to execute code, and a large percentage of the 
basic modules are written in JavaScript. Node.js contains a built-in library to allow 
applications to act as a web server without software such as Apache HTTP Server, 
Nginx or IIS. 

— Wikipedia 

General Learning: 

• The Art of Node [read] 

• Introduction to Node.js [watch][$] 

• Introduction to Node.js from Evented Mind [watch][$] 

• io.js and Node.js Next: Getting Started [watch][$] 

• Learn all the nodes [watch] 

• The Node Beginner Book [read][$] 

• Nodeschool. io [code] 

• Node.js Basics [watch][$] 

• Node.js in Practice [read][$] 
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Learn Module Loading and Dependency 
Management 


General Learning: 

• browserify-handbook [read] 

• Choose ES6 modules Today! [read] 

• Creating JavaScript Modules with Browserify [watch][$] 

• Start your own JavaScript library using webpack and ES6 

• Webpack Fundamentals [watch][$] 

References/Docs: 

• browserify 

• system. js 

• webpack 
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Learn Package Manager 


A package manager or package management system is a collection of software tools 
that automates the process of installing, upgrading, configuring, and removing software 
packages for a computer's operating system in a consistent manner. It typically 
maintains a database of software dependencies and version information to prevent 
software mismatches and missing prerequisites. 

— Wikipedia 

General Learning: 

• Bower Fundamentals [watch][$] 

• The Mystical & Magical SemVer Ranges Used By npm & Bower [read] 

• npm Basics [watch][$] 

• The npm Book [read] 

• Package Managers: An Introductory Guide For The Uninitiated Front-End Developer 
[read] 

• Up and Running with NPM, the Node Package Manager[watch][$] 

References/Docs: 

• bower 

• jspm.io 

• npm 
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Learn Version Control 


A component of software configuration management, version control, also known as 
revision control or source control, is the management of changes to documents, 
computer programs, large web sites, and other collections of information. Changes are 
usually identified by a number or letter code, termed the "revision number," "revision 
level," or simply "revision." For example, an initial set of files is "revision 1 ." When the 
first change is made, the resulting set is "revision 2," and so on. Each revision is 
associated with a timestamp and the person making the change. Revisions can be 
compared, restored, and with some types of files, merged. 

— Wikipedia 

The current modern solution for version control is Git. Learn it! 

General Learning: 

• codeschool.com [interact] 

• Getting Git Right [read] 

• Git Fundamentals [watch][$] 

• Pro Git [read] 

• Ry's Git Tutorial [read] 

Mastering: 

• Advanced Git Tutorials [read] 

• Pro Git [read] 

References/Docs: 

• https://git-scm.com/doc 
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Learn Build and Task Automation 


Build automation is the process of automating the creation of a software build and the 
associated processes including: compiling computer source code into binary code, 
packaging binary code, and running automated tests. 

— Wikipedia 

General Learning: 

• Getting Started with Gulp [read][$] 

• Gulp Basics [watch][$] 

• JavaScript Build Automation With Gulp.js [watch][$] 

• Learning Gulp - Getting Started with the Front End Factory [read] 

• Rapid Gulp [watch][$] 

• Using npm as a Task Runner [watch][$] 

References/Docs: 

• Gulp 

Gulp is great. However, you might only need npm run . Before turning to additional 
complexity in your application stack ask yourself if npm run can do the job. If you need 
more, use both. 

Read: 

• Build Tools vs npm Scripts: Why Not Both? 

• Give Grunt the Boot! A Guide to Using npm as a Build Tool 

• How to Use npm as a Build Tool 

• Task Automation with npm Run 

• Using npm as a Build System for Your next Project 
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Learn Site Performance Optimization 


Web performance optimization, WPO, or website optimization is the field of knowledge 
about increasing the speed in which web pages are downloaded and displayed on the 
user's web browser. With the average internet speed increasing globally, it is fitting for 
website administrators and webmasters to consider the time it takes for websites to 
render for the visitor. 

— Wikipedia 

General Learning: 

• Browser Rendering Optimization [watch] 

• Even Faster Web Sites: Performance Best Practices for Web Developers [read][$] 

• High Performance Web Sites: Essential Knowledge for Front-End Engineers [read][$] 

• JavaScript Performance Rocks [read] 

• PageSpeed Insights Rules [read] 

• Performance Calendar [read] 

• perf. rocks 

• Using WebPageTest [read][$] 

• Web Performance Daybook Volume 2 [read][$] 

• Web Performance: The Definitive Guide [read] 

• Website Performance [watch][$] 

• Website Performance Optimization [watch] 
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Learn JS Testing 


Unit Testing - In computer programming, unit testing is a software testing method by 
which individual units of source code, sets of one or more computer program modules 
together with associated control data, usage procedures, and operating procedures, are 
tested to determine whether they are fit for use. Intuitively, one can view a unit as the 
smallest testable part of an application. 

— Wikipedia 

Functional Testing - Functional testing is a quality assurance (QA) process and a type 
of black box testing that bases its test cases on the specifications of the software 
component under test. Functions are tested by feeding them input and examining the 
output, and internal program structure is rarely considered (not like in white-box 
testing). Functional testing usually describes what the system does. 

— Wikipedia 

Integration Testing - Integration testing (sometimes called integration and testing, 
abbreviated l&T) is the phase in software testing in which individual software modules 
are combined and tested as a group. It occurs after unit testing and before validation 
testing. Integration testing takes as its input modules that have been unit tested, groups 
them in larger aggregates, applies tests defined in an integration test plan to those 
aggregates, and delivers as its output the integrated system ready for system testing. 

— Wikipedia 

General Learning: 

• Front-End First: Testing and Prototyping JavaScript Apps [watch][$] 

• Let's Code: Test-Driven JavaScript [watch][$] 

• JavaScript Testing Recipes [read][$] 

• Testable JavaScript [read][$] 

• Test-Driven JavaScript Development [read][$] 
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Learn Headless Browsers 


A headless browser is a web browser without a graphical user interface. 

Headless browsers provide automated control of a web page in an environment similar 
to popular web browsers, but are executed via a command line interface or using 
network communication. They are particularly useful for testing web pages as they are 
able to render and understand HTML the same way a browser would, including styling 
elements such as page layout, color, font selection and execution of JavaScript and 
AJAX which are usually not available when using other testing methods. Google stated 
in 2009 that using a headless browser could help their search engine index content 
from websites that use AJAX. 

— Wikipedia 

• Getting Started with PhantomJS [read][$] 

• PhantomJS Cookbook [read][$] 

• PhantomJS for Web Automation [watch] 

• Rapid PhantomJS [watch][$] 
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Learn Offline Development 


Offline development (aka offline first) is an area of knowledge and discussion around 
development practices for devices that are not always connected to the Internet or a power 
source. 

General Learning: 

• Creating HTML5 Offline Web Applications [read] 

• Everything You Need to Know to Create Offline-First Web Apps [read] 

• Offline First [read] 

• offlinefirst.org [read] 

• Your First Offline Web App [read] 
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Learn Security 


• Browser Security Handbook [read] 

• Frontend Security [watch] 

• HTML5 Security Cheatsheet [read] 

• Security for Web Developers: Using JavaScript, HTML, and CSS [read][$] 

• The Tangled Web: A Guide to Securing Modern Web Applications [read][$] 

• Web Security Basics [read] 
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Learn Multi-Thing Development 


THIS IS NOT 
THE WEB. 


THIS IS THE WEB. 



THIS WILL BE THE WEB. 



Image source: http ://brad frost, com/blog/post/this-is-the-web/ 

A site or application can run on a wide range of computers, laptops, tablets and phones, as 
well as a handful of other things (watches, thermostats, fridges, etc.). How you determine 
what things you'll support and how you will develop to support those things is called a multi- 
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thing development strategy. Below, I list the most common multi-thing development 
strategies. 

• Build a responsive (RWD) web site/app for all things. 

• Build a RESS (responsive web design with server-side components) web site/app for all 
things. 

• Build an adaptive/progressively enhanced web site/app for all things. 

• Build a website, web app, native app, or hybrid-native app for each individual thing or a 
grouping of things. 

• Attempt to retrofit something you have already built using bits and parts from strategies 
1, 2 or 3. This could be as simple as sprinkling in some screen-size agnostic Ul parts or 
attempting to fully support other things with the entire Ul. 

General Learning: 

• Adaptive Web Design [read][$] 

• Designing Multi-Device Experiences: An Ecosystem Approach to User Experiences 
across Devices [read][$] 

• Designing with Progressive Enhancement [read][$] 

• Mobile Web Development [watch] 

• Responsive HTML Email Design [watch][$] 

• Responsive Images [watch] 

• Responsive Typography [watch][$] 

• Responsive Web Design [watch][$] 

• Responsive Web Design Fundamentals [watch] 
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Directed Learning 

This section focuses on directed learning via schools, courses, programs and bootcamps. 
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Directed Learning 


The table below contains instructor led, paid, front-end courses, programs, schools, and 
bootcamps. 

If you can't afford a directed education, a self directed education using screencasts, books, 
and articles is a viable alternative to learn front-end development for the self-driven 
individual. 
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company 

course 

price 

on site 

remote 

Austin Coding 
Academy 

The Front End Track 

2,490 

per 

session 

Austin, TX 


Betamore 

Front-end Web 
Development 

8,500 

Baltimore, 

MD 


BLOC 

Become a Frontend 
Developer 

4,999 


yes 

Codeup 

Night Front-End 
Bootcamp 

8,500 

San 

Antonio, 

Texas 


Codify Academy 

Front-end Web 
Development 

4,000 

multiple 

locations 


DecodeMTL 

Learn Front-end Web 
Development 

2,500 

Montreal, 

QC 


The Flatiron School 

Introduction to Front- 
End Web Development 

3,500 

New York, 
NY 


General Assembly 

Frontend Web 
Development 

3,500 

multiple 

locations 


HackerYou 

Front-end Web 

Development 

Immersive 

7,000 - 
7,910 

Toronto, 

Canada 


Iron Yard 

Front End Engineering 

12,000 

multiple 

locations 


LearningFuze 

Part-Time Front-End 
Development Course 

2,500 

Irvine, CA 


The New York Code 
+ Design Academy 

Front End 101 

2,000 

New York, 
NY 


Portland Code 
School 

Advanced Front-end 
Developer Tools 

2,000 

Portland, 

OR 


Thinkful 

Frontend Web 
Development 

300 per 
month 


yes 

Udacity 

Front-End Web 
Developer Nanodegree 

200 

monthly 

multiple 

locations 

yes 
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Front-End Developers to Learn From 


The notion that you should follow an individual to learn about front-end development is 
slowly becoming pointless. The advanced practitioners of front-end development generate 
enough content that you can simply follow the community/leaders by paying attention to the 
front-end "news" outlets (via Newsletters, News outlet, & Podcasts). 
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Front-End Newsletters, News Sites, & 
Podcasts 


General Front-End Newsletters, News, & Podcasts: 

• 'he Big Web Show 

• Fresh Brewed Frontend 

• Front-End Dev Weekly 

• Front-End News in 5 Minutes 

• frontendfront.com 

• Mobile Web Weekly 

• Open Web Platform Daily Digest 

• O'Reilly Web Platform Radar 

• shoptalkshow.com 

• TTL 

• Viewsources 

• The Web Ahead 

• Web Components Weekly 

• Web Design Weekly 

• The Web Platform Podcast 

• webtoolsweekly.com 

HTML/CSS Newsletters: 

• CSS Weekly 

• HTML 5 Weekly 

JavaScript Newsletters, News, & Podcasts: 

• Echo JS 

• FiveJS 

• JavaScript Jabber 

• JavaScript Kicks 

• JavaScript Live 

• JavaScript Weekly 

• JavaScript.com 

Graphic and Animation Newsletters and Podcasts 

• Motion and Meaning 
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• Responsive Images Community Group Newsletter 

• SVG Immersion Podcast 

• Web Animation Weekly 


Newsletters, News, & Podcasts 


80 


Front-end Handbook 


Part III: Tools 


Part three briefly explains and identifies tools of the trade. 

Make sure you understanding the category that a set of tools falls within, before studying the 
tools themselves. 

Note that just because a tool is listed, or a category of tools is documented, this does not 
equate to an assertion on my part that a front-end developer should learn it and use it. 
Choose your own toolbox. I'm just providing the common toolbox options. 


THE FRONT-END SPECTRUM 


Package Managers 
Front-End Performance 
JS Frameworks 
JS Preprocessors 
Process Automation 
Code Quality 
Build Tools 
Testing 
Back-End 




Y 

JADE 


Core 

Text Editors 
Ul Frameworks 
ResponsibleWeb Design 
Templating 
Browser Refreshing 
CSS Preprocessors 
OOCSS & Style Guides 


Version Control 


Image source: https://medium.eom/@withinsight1/the-front-end-spectrum-c0f30998c9f0 
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General Front-End Development Tools 


Development Tools: 

• Browsersync 

• CodeKit 

• ish. 2.0. 

• placehold.it 

• Prepros 

• screensiz.es 

• Wraith 

Online Code Editors: 

• CodePen 

• es6fiddle.net 

• JS Bin 

• jJSFiddle 

• Liveweave 

• Plunker 

Tools for Finding Tools: 

• built with 

• javascripting.com 

• microjs.com 

• stackshare.io 

• stylesheets. co 

• The Toolbox 

• Unheap 
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Doc/API Browsing Tools 


Tools to browser common developer documents and developer API references. 

• Dash [OS X, iOS][$] 

• DevDocs 

• Velocity [Windows][$] 

• Zeal [Windows, Linux] 
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SEO Tools 


• Keyword Tool 

• Google Webmasters Search Console 

• Varvy SEO tool 
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Prototyping & Wireframing Tools 


Creating: 

• Balsamiq Mockups [$] 

• Justinmind [$] 

• UXPin [free to $] 

Collaboration / Presenting: 

• InVision [free to $] 

• Conceptboard [free to $] 

• myBalsamiq [$] 
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Diagramming Tools 


• draw.io [free to $] 

• Cacoo [free to $] 

• gliffy [free to $] 
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HTTP/Network Tools 

• Charles [$] 

• Chrome DevTools Network Panel 

• Fiddler 

• Postman 
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Learn Code Editors 


A source code editor is a text editor program designed specifically for editing source 
code of computer programs by programmers. It may be a standalone application or it 
may be built into an integrated development environment (IDE) or web browser. Source 
code editors are the most fundamental programming tool, as the fundamental job of 
programmers is to write and edit source code. 

— Wikipedia 

Front-end code can minimally be edited with a simple text editing application like Notepad or 
TextEdit. But, most front-end practitioners use a code editor specifically design for editing a 
programming language. 

Code editors come in all sorts of types and size, so to speak. Selecting one is a rather 
subjective engagement. Choose one, learn it inside and out, then get on to learning HTML, 
CSS, DOM, and JavaScript. 

However, I do strongly believe, minimally, a code editor should have the following qualities 
(by default or by way of plugins): 

1. Good documentation on how to use the editor 

2. Report (i.e. , hinting/linting/errors) on the code quality of HTML, CSS, and JavaScript. 

3. Offer syntax highlighting for HTML, CSS, and JavaScript. 

4. Offer code completion for HTML, CSS, and JavaScript. 

5. Be customizable by way of a plug-in architecture 

6. Have available a large repository of third-party/community plug-ins that can be used to 
customize the editor to your liking 

7. Be small, simple, and not coupled to the code (i.e., not required to edited the code) 

I personally use and recommend Sublime Text with the following plug-ins. 

• AutoFileName 

• BracketHighlighter 

• Color Highlighter 

• CSS3 

• HTMLAttributes 

• HTML-CSS-JS Prettify 

• Package Control 

• SideBarEnhancements 

• StringEncode 
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• SublimeLinter 

° SublimeLinter-json 
° SublimeLinter-jshint 
o SublimeLinter-html-tidy 

• Terminal 

Here are some resources for learning Sublime: 

• Perfect Workflow in Sublime Text 2 [watch][requires login, but free] 

• Sublime Productivity [read][$] 

• Sublime Text 3 From Scratch [watch][$] 

• Sublime Text Power User Book [read + watch][$] 

Code Editors: 

• Atom 

• Brackets 

• Sublime Text [$] 

• WebStorm [$] 

• Visual Studio Code 

Online Code Editors: 

• Cloud9 [free to $] 

• Codeanywhere [free to $] 

• Koding [free to $] 

Sharable/Runnable Code Editors: 

Used to share limited amounts of immediately runnable code. Not a true code editor but a 
tool that can be used to small amounts of immediately runnable code in a web browser. 

• CodePen [free to $] 

• es6fiddle.net 

• jsbin.com [free to $] 

• jsfiddle.net 

• liveweave.com 

• Plunker 
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Browser Tools 


JS Browser Coding Utilities: 

• History.js 

• html2canvas 

• Platform .js 

• URI.js 

General Reference Tools to Determine If X Browser Supports X: 

• Big JS-Compatibility-Table 

• Browser support for broken/missing images 

• Browserscope 

• caniuse.com 

• HTML5 Please 

• HTML5 Test 

• iwanttouse.com/ 

• jscc.info 

• Platform Status 

• webbrowsercompatibility.com 

• whatwebcando. today 

Browser Development/Debug Tools: 

• Chrome Developer Tools (aka DevTools) 

° Per-Panel Documentation 
° Command Line API Reference 
° Keyboard & Ul Shortcuts Reference 
° Settings 

• Firefox Developer Tools 

• IE Developer tools (aka F12 tools) 

• Opera Dragonfly 

• Safari Web Inspector 

• Vorlon.js 

Synchronized Browser Tools: 

• Browsersync 

Browser Coding Tools to Determine If X Browser Supports X: 
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• ES Feature Tests 

• Feature .js 

• Modernizr 

Broad Browser Polyfills/Shims: 

• console-polyfill 

• HTML5 Cross Browser Polyfills 

• socket, io 

• SockJS 

• webcomponents.js 

• webshim 

Browser Hosted Testing/Automation: 

• Browserling [$] 

• BrowserStack [$] 

• CrossBrowserTesting.com [$] 

• Sauce Labs [$] 

• Selenium 

Headless Browsers: 

• PhantomJS 

• slimerjs 

• TrifleJS 

Headless Browser Automation: 

Used for functional testing and monkey testing. 

• CasperJS 

• gremlins.js 

• Nightmare 

• NightwatchJS 

Browser Hacks: 

• browserhacks.com 
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HTML Tools 


HTML Templates/Boilerplates/Starter Kits: 

• dCodes 

• Email-Boilerplate 

• HTML5 Boilerplate 

• HTML5 Bones 

• Mobile boilerplate 

• Pears 

• Web Starter Kit Boilerplate & Tooling for Multi-Device Development 

HTML Polyfill: 

• html5shiv 

Transpiling: 

• HAML 

• jade 

• Markdown 

References: 

• Element attributes 

• Elements 

• HTML Arrows 

• HTML Entity Lookup 

• HTML Interfaces Browser Support 

• HTMLelement.info 

Linting/Hinting: 

• html5-lint 

• HTMLHint 

• html-inspector 

Optimizer: 

• HTML Minifier 

Online Creation/Generation/Experimentation Tools: 
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• tablesgenerator.com 

Authoring Conventions: 

• HTML Code Guide 

• Principles of Writing Consistent, Idiomatic HTML 

Workflow: 

• Emmet 

Trending HTML Repositories on GitHub This Month: 

https://github.com/trending?l=html&since=monthly 
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CSS Tools 


Desktop & Mobile CSS Frameworks: 

• Base 

• Bootstrap 

• Concise 

• Foundation 

• Material Design Lite (MDL) 

• Materialize 

• Metro Ul 

• Pure. css 

• Semantic Ul 

Mobile Only CSS Frameworks: 

• Ratchet 

CSS Reset: 

A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules 
that resets the styling of all HTML elements to a consistent baseline. 

— cssreset.com 

• Eric Meyer's “Reset CSS” 2.0 

• Normalize 

Transpiling: 

• pleeease.io 

• PostCSS & cssnext 

• rework & myth 

• Sass/SCSS 

• Stylus 

References: 

• css3test.com 

• css3clickchart.com 

• css4-selectors.com 

• CSS TRIGGERS. ..A GAME OF LAYOUT, PAINT, AND COMPOSITE 
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• cssvalues.com 

• MDN CSS Reference 

• OverAPI CSS Cheatsheet 

Linting/Hinting: 

• CSS Lint 

• stylelint 

Code Formatter/Beautifier: 

• CSScomb 

• CSSfmt 

Optimizer: 

• clear-css 

• cssnano 

• CSSO 

Online Creation/Generation/Experimentation Tools: 

• CSS Arrow Please 

• CSS Matic 

• Enjoy CSS 

• Flexbox Playground 

• flexplorer 

• patternify.com 

• patternizer.com 

• Ultimate CSS Gradient Generator 

Architecting CSS: 

• Atomic Design [read] 

• OOCSS [read] 

• SMACSS [read][$] 

Authoring Conventions: 

• CSS code guide [read] 

• cssguidelin.es [read] 

• Google HTML/CSS Style Guide 

• Idiomatic CSS [read] 

Trending CSS Repositories on GitHub This Month: 
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https://github.com/trending?l=css&since=monthly 
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DOM Tools 


DOM Libraries/Frameworks: 

• clipboard.js 

• jQuery 

• Keypress 

• Tether 

• Zepto 

DOM Performance Tools: 

• DOM Monster 

References: 

• Events 

• DOM Browser Support 

• DOM Events Browser Support 

• HTML Interfaces Browser Support 

• MDN Document Object Model (DOM) 

DOM Polyfills/Shims: 

• dom-shims 

• Pointer Events Polyfill: a unified event system for the web platform 

Virtual DOM: 

• jsdom 

• virtual-dom 
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JavaScript Tools 


JS Utilities: 

• accounting.js 

• async 

• Chance 

• format.js 

• is.js 

• lodash 

• Math.js 

• Moment.js 

• Numeral.js 

• string. js 

• underscore.js 

• wait 

• xregexp.com 

Transpiling (ESX to ESX): 

• Babel 

JavaScript Compatibility Checker: 

• jscc.info/ 

Linting/Hinting: 

• eshint 

• jshint 

• JSLint 

° jslinterrors.com 

Unit Testing: 

• Jasmine 

° Jest 

• Mocha 

• QUnit 

Testing Assertions for Unit Testing: 
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• Chai 

• expect.js 

• should.js 

Test Spies, Stubs, and Mocks for Unit Testing: 

• sinon.js 

Code Style Linter: 

• JSCS 

Code Formater/Beautifier: 

• esformatter 

• js-beautify 

• jsfmt 

Performance Testing: 

• benchmark.js 

• jsperf 

Visualization, Static Analysis, Complexity, Coverage Tools: 

• Blanket.js 

• Coveralls [$] 

• escomplex 

• Esprima 

• jscomplexity.org 

• istanbul 

• Plato 

Optimizer: 

• UglifyJS 2 

Obfuscate: 

• Javascript Obfuscator [free to $] 

• JScrambler [$] 

Sharable/Runnable Code Editors: 

• es6fiddle.net 

• jsbin.com [free to $] 
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• jsfiddle.net 

Online Regular Expression Editors/Visual Tools: 

• debuggex 

• regexIOI 

• regexper 

• RegExr 

Authoring Conventions: 

• Airbnb JavaScript Style Guide 

• Khan JavaScript Style Guide 

• Principles of Writing Consistent, Idiomatic JavaScript 

Trending JS Repositories on GitHub This Month: 

https://github.com/trending?l=javascript&since=monthly 

Most Depended upon Packages on NPM: 

https://www.npmjs.com/browse/depended 
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Static Site Generators Tools 

JS Site Generators: 

• Harp 

• Metalsmith 

JS Blog Site Generators: 

• Hexo 

• HubPress 

Site Generator Listings: 

• staticgen.com 

• staticsitegenerators.net 


Static Site Generators Tools 


101 


Front-end Handbook 


App (Desktop, Mobile, Tablet, etc.) Tools 


Front-End App Frameworks: 

• AngularJS & Batarang 

• Aurelia 

• Backbone & Marionette 

• Ember & Ember Inspector 

• Polymer & ron Elements & Paper Elements 

• React & React-router & Flux & React Developer Tools 

• Vue.js & vue-loader & vue-router 

Full-Stack JS App Platforms: 

• Hoodie 

• MEAN (i.e., MongoDB, Express, AngularJS, and Node.js.) 

• Meteor 

Mobile Web Ul/Site/App Frameworks 

These solutions can be used anywhere including in a WebView (i.e., web platform and 
browser engine) app: 

• Framework7 

• Kendo Ul Mobile 

• Mobile Angular Ul 

• Ratchet 

Native Hybrid Mobile WebView (i.e., Browser Engine Driven) Frameworks: 

These solutions typically use Cordova, crosswalk, or a custom WebView as a bridge to 
native APIs. 

• ionic 

• onsen.io 

Native Hybrid Mobile Development Webview (i.e., Browser Engine Driven) 
Environments/Platforms/Tools: 

These solutions typically use Cordova, crosswalk, or a custom WebView as a bridge to 
native APIs. 

• Adobe PhoneGap [$] 
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• AppBuilder [$] 

• cocoon. io [free to $] 

• ionic hub [free to $] 

• kony [$] 

• manifoldJS 

• Monaca [$] 

• Taco 

Native Desktop WebView (i.e., Browser Engine Driven) App Frameworks: 

• Electron 

• NW.js 

Native Mobile App Frameworks (Aka JavaScript Native Apps) 

These solutions use a JS engine at runtime to interpret JS and bridge that to native APIs. No 
browser engine or WebView is used. The Ul is constructed from native Ul components. 

• NativeScript 

• React Native 

• tabris.js [free to $] 

• trigger.io [$] 

References: 

• todomvc.com 

• Frontend Guidelines Questionnaire 

App Seeds/Starters/Boilerplates: 

• Angular 2 Webpack Starter 

• Ember starter-kit 

• NG6-starter 

• hjs-webpack 

• React Starter Kit 
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Scaffolding Tools 


Client side Scaffolding is concerned with generating a starter template for the application as 
a whole, rather than generating code to access a database. 

• Slush 

• Yeoman 
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Templating Tools 


Just Templating: 

• doT.js 

• Handlebars 

° htmlbars 

• Hogan.js 

• Mustache.js 

• Nunjuncks 

• Transparency 

Templating and Reactive Data Binding: 

• jquerymy.js 

• knockout 

• paperclip.js 

• ractive.js 

• react .js 

• riot 

• Rivets.js 

• RxJS 

• vue.js 

Templating to Virtual DOM: 

• JSX 

• t7 
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Ul Widgets & Components Tools 


Desktop & Mobile: 

• Bootstrap 

• Kendo U [free to $] 

• Material ui 

• Materialize 

• Metro Ul 

• Polymer Paper Elements 

• Semantic Ul 

• Webix [$] 

Desktop (NW.js and Electron): 

• Photon 

• React Ul Components for OS X El Capitan and Windows 10 

Mobile Focused: 

• Framework7 

• Kendo Ul Mobile 

• Mobile Angular Ul 

• Ratchet 
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Data Visualization (e.g., Charts) Tools 


JS Libraries: 

• d3 

• sigmajs 

Widgets & Components: 

• amCharts [$] 

• C3.js 

• Chartist-jsj 

• Chart.js 

• Epoch 

• FusionCharts [$] 

• Google Charts 

• Highcharts [Non-commercial free to $] 

• ZingChart [free to $] 

Services: 

• ChartBlocks [free to $] 

• Datawrapper 

• infogr.am [free to $] 

• plotly [free to $] 
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Graphics (e.g., SVG, canvas, webgl) Tools 


General: 

• Fabric.js 

• Two.js 

Canvas: 

• EaseIJS 

• Paper.js 

SVG: 

• d3 

• Raphael 

• Snap.svg 

• svg.js 

WebGL: 

• pixi.js 

• three .js 
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Animation Tools 


• Dynamics.js 

• GreenSock-JS 

• snabbt.js 

• TweenJS 

• Velocity.js 

Polyfills/Shims: 

• web-animations-js 
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JSON Tools 


Online Editors: 

• JSONmate 

Query Tools: 

• DefiantJS 

• JSON Mask 

• ObjectPath 

Generating Mock JSON Tools: 

• JSON Generator 

• Mockaroo 

Online JSON Mocking API Tools: 

• FillText.com 

• JSONPIaceholder 

• mockable.io 

• Mocky 

Local JSON Mocking API Tools: 

• json-server 

JSON Specifications/Schemas: 

• json-schema.org & jsonschema.net 

• {jsomapi} 
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Testing Framework Tools 


• Intern 

• Karma 

• NightWatch.js 
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Front-End Data Storage Tools 

• AlaSQL 

• Dexie.js 

• ForerunnerDB 

• localForage 

• LokiJS 

• Lovefield 

• Pouchdb 

• YDN-DB 


Data Storage Tools 


112 


Front-end Handbook 


Module/Package Loading Tools 


• Browserify 

• Rollup 

• SystemJS 

• webpack 
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Module/Package Repository Tools 

• Bower 

• jspm.io 

• NPM 

• spmjs 
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Web/Cloud/Static Hosting Tools 

• AWS [$] 

• DigitalOcean [$] 

• DIVSHOT [free to $] 

• Heroku [free to $] 

• Modulus [$] 

• netlify [free to $] 

• Surge [free to $] 
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Project Management & Code Hosting Tools 

• Assembla [free to $] 

• Bitbucket [free to $] 

• Codebase [$] 

• Github [free to $] 

• Unfuddle [$] 
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Collaboration & Communication Tools 


• Google Hangouts 

• Skype [free to $] 

• Slack & screenhero [free to $] 

Code/GitHub Collaboration & Communication: 

• Gitter [free to $] 


Collaboration & Communication Tools 


117 


Front-end Handbook 


Content Management Hosted/API Tools 


API CMS (i.e., Content Delivery CMS) Tools: 

• Contentful [$] 

• Cosmic JS [free to $] 

• prismic.io [free to $] 

Hosted CMS Tools: 

• Cushy CMS [free to $] 

• LightCMS [$] 

• Page Lime [$] 

• Surreal CMS [$] 

Static CMS Tools: 

• webhook.com 
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Back-end as a service (aka BAAS) tools for 
front-end developers 


Data/back-end management as a service: 

• Back& [free to $] 

• Fi rebase [free to $] 

• Kinvey [free'ish to $] 

• Parse [free to $] 

• Pusher [free to $] 

User Management as a Service: 

• AuthO [$] 

• Hull [$] 

• UserApp [free to $] 
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Offline Tools 


• Hoodie 

• Offline.js 

• PouchDB 

• upup 


Offline Tools 


120 


Front-end Handbook 


Security Tools 

Coding Tool: 

• DOMPurify 

• XSS 

References: 

• HTML5 Security Cheatsheet 
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Tasking (aka Build) Tools 


Tasking/Build Tools: 

• Grunt 

• Gulp 

Tasking/Build and More Tools: 

• Brunch 

• Mimosa 


Tasking (aka Build) Tools 


122 


Front-end Handbook 


Deployment Tools 

• Bamboo [$] 

• Codeship [free to $] 

• FTPLOY [free to $] 

• Travis Cl [free to $] 

• Springloops [free to $] 

• Surge 

• Sync Ninja 
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Site/App Monitoring Tools 

Uptime: 

• Pingdom [free to $] 

• Uptime Robot 

• Uptrends [$] 

General: 

• New Relic 
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JavaScript Error Reporting/Monitoring 

• errorception [$] 

• Raygun [$] 

• Sentry [free to $] 

• TrackJS [$] 
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Performance Tools 


Reporting: 

• Chrome Devtools Timeline 

• GTmetrix 

• sitespeed.io 

• Speed Curve [$] 

• Web Page Test 

• WEIGHTOF.IT 

JS Tools: 

• imagemin 

• ImageOptim-CLI 

Budgeting: 

• performancebudget.io 

References/Docs: 

• Jank Free 

• Performance of ES6 features relative to the ES5 
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